<template>
  <div>
    <div class="tinymce-editor" style="position: relative">
      <editor
        v-model="myValue"
        :init="init"
        @onKeyUp="onImgQuery"
        @onPaste="onImgQuery"
        @onClick="onClick"
      >
      </editor>
    </div>
  </div>
</template>

<script>
// import { uploadImg,uploadOOS} from '@/api/single'
// import _get from 'lodash.get'
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import axios from "axios"
import "tinymce/themes/silver/theme";
import "tinymce/models/dom";
import "tinymce/icons/default";
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
// import 'tinymce/plugins/fullpage'  //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
// import 'tinymce/plugins/hr'  //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
// import 'tinymce/plugins/paste' //粘贴插件
import "tinymce/plugins/preview"; //预览
// import 'tinymce/plugins/print'//打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
// import 'tinymce/plugins/tabfocus'  //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
export default {
  components: {
    Editor,
  },
  props: {
    //传入一个value，使组件支持v-model绑定
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        " preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autosave",
    },
  },
  data() {
    return {
      //初始化配置
      init: {
        language_url:
          "/tinymce/langs/zh-Hans.js" /*vue3.x 的路径/tinymce/langs/zh_CN.js ，vue2.x的路径/static/tinymce/langs/zh_CN.js*/,
        language: "zh-Hans",
        skin_url: "/tinymce/skins/ui/oxide",
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", //字体样式
        lineheight_formats: "0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5", //行高配置，也可配置成"12px 14px 16px 20px"这种形式
        height: 600,
        width: 810,
        plugins: this.plugins,
        branding: false,
         toolbar: false,
  menubar: false,
  // inline: true
        statusbar: true, // 隐藏编辑器底部的状态栏
      },
      myValue:'',
    };
  },
  created(){
    axios.get('http://127.0.0.1:7001/test/html').then(res=>{
      console.log(res.data.html);
      this.myValue=res.data.html
    })
  },
  mounted() {
    tinymce.init({});
  },
  methods: {
  },
  watch: {
  },
};
</script>
<style scoped>
.num-loading {
  height: 24px;
  width: 24px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #1d9af2;
  border-top: 2px solid #fff;
  animation: spinner1 600ms linear infinite;
  -moz-animation: spinner1 600ms linear infinite;
  -webkit-animation: spinner1 600ms linear infinite;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
}
@keyframes spinner1 {
  to {
    transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
.g-c-300 {
  color: #ff7300;
}
.notic-box {
  color: #ff7300;
  margin-top: 5px;
}
.rlPopup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.rl-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 320px;
  height: 154px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}
.pop-txt {
  height: 114px;
  padding: 32px 24px 0 24px;
  border-bottom: 1px solid #f9f9f9;
}
.pop-btn {
  height: 40px;
}
.pop-a {
  width: 160px;
  height: 40px;
  display: block;
  text-align: center;
  line-height: 40px;
  float: left;
}
.cancel-btn {
  background-color: #409efe;
  color: #fff;
  /*border-radius: 0 0 10px 0;*/
}
.cancel-btn:hover {
  background-color: #3996f6;
}
</style>
